<template>
    <div v-if="show">
        <el-form label-width="100px" label-position="left">
            <el-form-item label="标题" v-if="data.type!='grid'">
                <el-input v-model="data.name"/>
            </el-form-item>
            <!-- card5 start -->
            <template v-if="data.type== 'card5'">
                <el-form-item label="卡片尺寸" v-if="Object.keys(data.options).indexOf('boxWidth')>=0">
                    <el-input v-model="data.options.boxWidth"/>
                </el-form-item>
                <el-form-item label="头部标题默认值" v-if="Object.keys(data.options).indexOf('label')>=0">
                    <el-input v-model="data.options.label"/>
                </el-form-item>
                <el-form-item label="主标题" v-if="Object.keys(data.options).indexOf('name')>=0">
                    <el-input v-model="data.options.name"/>
                </el-form-item>
                <el-form-item label="显示副标题" v-if="Object.keys(data.options).indexOf('showTarget')>=0">
                    <el-switch
                        v-model="data.options.showTarget"
                    />
                </el-form-item>
                <el-form-item label="副标题-标题" v-if="Object.keys(data.options).indexOf('targetTitle')>=0">
                    <el-input v-model="data.options.targetTitle"/>
                </el-form-item>
                <el-form-item label="副标题" v-if="Object.keys(data.options).indexOf('target')>=0">
                    <el-input v-model="data.options.target"/>
                </el-form-item>
                <el-form-item label="显示右下" v-if="Object.keys(data.options).indexOf('showRule')>=0">
                    <el-switch
                        v-model="data.options.showRule"
                    />
                </el-form-item>
                <el-form-item label="右下-标题" v-if="Object.keys(data.options).indexOf('ruleTitle')>=0">
                    <el-input v-model="data.options.ruleTitle"/>
                </el-form-item>
                <el-form-item label="右下" v-if="Object.keys(data.options).indexOf('rule')>=0">
                    <el-input v-model="data.options.rule"/>
                </el-form-item>

                <el-form-item label="表格参数" v-if="Object.keys(data.options).indexOf('options')>=0 && data.type=='card5'">
                    <template>
                        <el-radio-group v-model="data.options.defaultValue">
                            <draggable
                                tag="ul"
                                :list="data.options.options"
                                v-bind="{group:{ name:'options'}, ghostClass: 'ghost',handle: '.drag-item'}"
                                handle=".drag-item"
                            >
                                <li v-for="(item, index) in data.options.options" :key="index" class="card5Config-li">
                                    <div v-for="(itm, idx) in item.td" :key="idx" class="card5Config-div">
                                        <div class="card5Config-div-item">
                                            <el-input :placeholder="itm.value" v-model="itm.value" size="mini" >
                                                <template slot="prepend">value</template>
                                            </el-input>
                                        </div>
                                        <div class="card5Config-div-item">
                                            <el-input :placeholder="itm.rowspan" v-model="itm.rowspan" min="1" step="1" size="mini" >
                                                <template slot="prepend">rowspan</template>
                                            </el-input>
                                        </div>
                                        <div class="card5Config-div-item">
                                            <el-input :placeholder="itm.colspan" v-model="itm.colspan" min="1" step="1" size="mini" >
                                                <template slot="prepend">colspan</template>
                                            </el-input>
                                        </div>
                                        <div class="card5Config-div-btnBox">
                                            <el-button class="card5Config-div-btnBox-btn" @click="handleOptionsRemoveCard5(index,idx)" circle plain type="danger" size="mini" icon="el-icon-minus"/>
                                        </div>
                                    </div>
                                    <i class="drag-item card5Config-i"><i class="iconfont2 icon-icon_bars"/></i>
                                    <el-button @click="handleOptionsRemove(index)" circle plain type="danger" size="mini" icon="el-icon-minus" class="card5Config-btn"/>
                                    <el-button type="text" @click="handleAddColOptionCard5(index)">添加列</el-button>
                                </li>
                                <el-button type="text" @click="handleAddOptionCard5">添加行</el-button>
                            </draggable>

                        </el-radio-group>

                    </template>

                </el-form-item>
            </template>
            <!-- card5 end -->
            <el-form-item label="默认值" v-if="Object.keys(data.options).indexOf('defaultValue')>=0">
                <el-select filterable v-model="data.options.defaultValue" @change="changeValue">
                    <el-option v-for="(item, dictIndex) in selectDict" :key="dictIndex" :value="item.code" :label="item.name"/>
                </el-select>
                <!-- <el-input v-if="data.type=='textarea'" type="textarea" :rows="5" v-model="data.options.defaultValue"/>
                <el-input v-else-if="data.type=='input'" v-model="data.options.defaultValue"/>
                <el-input-number v-else-if="data.type=='slider'" v-model="data.options.defaultValue"/>
                <el-rate v-else-if="data.type == 'rate'" style="display:inline-block;vertical-align: middle;" :max="data.options.max" :allow-half="data.options.allowHalf" v-model="data.options.defaultValue"/>
                <el-button type="text" v-else-if="data.type == 'rate'" style="display:inline-block;vertical-align: middle;margin-left: 10px;" @click="data.options.defaultValue=0">清空</el-button>
                <el-color-picker
                    v-else-if="data.type == 'color'"
                    v-model="data.options.defaultValue"
                    :show-alpha="data.options.showAlpha"
                />
                <el-switch v-else-if="data.type=='switch'" v-model="data.options.defaultValue"/>
                <el-input v-else type="text" v-model="data.options.defaultValue"/> -->
            </el-form-item>

            <el-form-item label="宽度" v-if="Object.keys(data.options).indexOf('width')>=0">
                <el-input v-model="data.options.width"/>
            </el-form-item>

            <el-form-item label="高度" v-if="Object.keys(data.options).indexOf('height')>=0">
                <el-input v-model="data.options.height"/>
            </el-form-item>
            <el-form-item label="卡片内文默认值" v-if="data.type=='card2' ||data.type=='card3'||data.type=='card4'">
                <el-input v-model="data.options.cardValue"/>
            </el-form-item>
            <el-form-item label="卡片详细默认值" v-if="data.type=='card2'|| data.type=='card4' ">
                <el-input v-model="data.options.detailValue"/>
            </el-form-item>
            <el-form-item label="编辑中的标题" v-if="data.type=='detailTitle' ">
                <el-input v-model="data.options.title"/>
            </el-form-item>
            <el-form-item label="编辑中的文本" v-if="data.type=='detailTitle' ">
                <el-input v-model="data.options.content"/>
            </el-form-item>
            <!-- 链接 -->
            <el-form-item label="链接方式" v-if="Object.keys(data.options).indexOf('linkType')>=0">
                <el-radio-group v-model="data.options.linkType">
                    <el-radio-button label="inline">内链</el-radio-button>
                    <el-radio-button label="outer">外链</el-radio-button>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="链接地址" v-if="Object.keys(data.options).indexOf('linkUrl')>=0">
                <el-input v-model="data.options.linkUrl"/>
            </el-form-item>
            <el-form-item label="参数" v-if="Object.keys(data.options).indexOf('query')>=0">
                <el-input v-model="data.options.query"/>
            </el-form-item>

            <el-form-item label="图片方式" v-if="Object.keys(data.options).indexOf('imgType')>=0">
                <el-radio-group v-model="data.options.imgType">
                    <el-radio-button label="image">图片</el-radio-button>
                    <el-radio-button label="icon">icon</el-radio-button>
                </el-radio-group>
            </el-form-item>
            <!-- 图标 -->
            <!-- iconName -->
            <el-form-item label="图标" v-if="Object.keys(data.options).indexOf('iconName')>=0">
                <el-button @click="dialogIconVisible = true" type="primary" >选择图标</el-button>
                <el-input disabled v-model="data.options.iconName"/>
            </el-form-item>

            <!-- 单元格 -->
            <el-form-item label="背景图片" v-if="Object.keys(data.options).indexOf('backgroundImage')>=0">
                <el-input v-model="data.options.backgroundImage"/>
            </el-form-item>
            <el-form-item label="图片宽度" v-if="Object.keys(data.options).indexOf('imgWidth')>=0">
                <el-input v-model="data.options.imgWidth"/>
            </el-form-item>

            <el-form-item label="图片高度" v-if="Object.keys(data.options).indexOf('imgHeight')>=0">
                <el-input v-model="data.options.imgHeight"/>
            </el-form-item>

            <!-- titleHeight -->
            <el-form-item label="文本高度" v-if="Object.keys(data.options).indexOf('titleHeight')>=0">
                <el-input v-model="data.options.titleHeight"/>
            </el-form-item>

            <el-form-item label="行高" v-if="Object.keys(data.options).indexOf('lineHeight')>=0">
                <el-input v-model="data.options.lineHeight"/>
            </el-form-item>

            <el-form-item label="图片默认值" v-if="Object.keys(data.options).indexOf('imgDefaultValue')>=0">
                <el-input v-model="data.options.imgDefaultValue"/>
            </el-form-item>

            <el-form-item label="标题默认值" v-if="Object.keys(data.options).indexOf('titleDefaultValue')>=0">
                <el-input v-model="data.options.titleDefaultValue"/>
            </el-form-item>

            <el-form-item label="副标题默认值" v-if="Object.keys(data.options).indexOf('descDefaultValue')>=0">
                <el-input v-model="data.options.descDefaultValue"/>
            </el-form-item>

            <el-form-item label="默认值" v-if="data.type=='FM1' || data.type=='FM2'">
                <el-input v-model="data.options.detailValue"/>
            </el-form-item>

            <el-form-item label="注解默认值" v-if="data.type=='FM1' || data.type=='FM2'">
                <el-input v-model="data.options.noticeValue"/>
            </el-form-item>

            <el-form-item label="标题注解默认值" v-if=" data.type=='FM2'">
                <el-input v-model="data.options.titleNotice"/>
            </el-form-item>

            <el-form-item label="下列注解默认值" v-if=" data.type=='FM2'">
                <el-input v-model="data.options.detailNotice"/>
            </el-form-item>

            <el-form-item label="跳转地址默认值" v-if="Object.keys(data.options).indexOf('linkDefaultValue')>=0">
                <el-input v-model="data.options.linkDefaultValue"/>
            </el-form-item>

            <el-form-item label="跳转地址名称默认值" v-if="Object.keys(data.options).indexOf('linkTitleDefaultValue')>=0">
                <el-input v-model="data.options.linkTitleDefaultValue"/>
            </el-form-item>

            <el-form-item label="组件尺寸" v-if="Object.keys(data.options).indexOf('size')>=0">
                <el-select v-model="data.options.size">
                    <el-option value="medium" label="medium"/>
                    <el-option value="small" label="small"/>
                    <el-option value="mini" label="mini"/>
                </el-select>
            </el-form-item>

            <el-form-item label="主题" v-if="Object.keys(data.options).indexOf('type')>=0">
                <el-select v-model="data.options.type">
                    <el-option value="" label="primary"/>
                    <el-option value="success" label="success"/>
                    <el-option value="info" label="info"/>
                    <el-option value="warning" label="warning"/>
                    <el-option value="danger" label="danger"/>
                </el-select>
            </el-form-item>

            <el-form-item label="是否有边框描边" v-if="Object.keys(data.options).indexOf('hit')>=0">
                <el-switch v-model="data.options.hit" />
            </el-form-item>

            <!-- 样式开始 -->

            <el-form-item label="图片右边距：" v-if="Object.keys(data.options).indexOf('imgMarginRight')>=0">
                <el-input style="width: 180px;" v-model="data.options.imgMarginRight"/>
            </el-form-item>
            <el-form-item label="内边距：" v-if="Object.keys(data.options).indexOf('padding')>=0">
                <el-input style="width: 180px;" v-model="data.options.padding"/>
            </el-form-item>
            <el-form-item label="左边距：" v-if="Object.keys(data.options).indexOf('marginLeft')>=0">
                <el-input style="width: 180px;" v-model="data.options.marginLeft"/>
            </el-form-item>
            <el-form-item label="右边距：" v-if="Object.keys(data.options).indexOf('marginRight')>=0">
                <el-input style="width: 180px;" v-model="data.options.marginRight"/>
            </el-form-item>
            <el-form-item label="水平排列方式" v-if="Object.keys(data.options).indexOf('textAlign')>=0">
                <el-select v-model="data.options.textAlign">
                    <el-option value="left" label="左对齐"/>
                    <el-option value="right" label="右对齐"/>
                    <el-option value="center" label="居中"/>
                </el-select>
            </el-form-item>
            <el-form-item label="圆角：" v-if="Object.keys(data.options).indexOf('borderRadius')>=0">
                <el-input style="width: 180px;" v-model="data.options.borderRadius"/>
            </el-form-item>
            <el-form-item label="背景色：" v-if="Object.keys(data.options).indexOf('backgroundColor')>=0">
                <el-color-picker
                    v-model="data.options.backgroundColor"
                />
            </el-form-item>
            <el-form-item label="背景图：" v-if="Object.keys(data.options).indexOf('backgroundImage')>=0">
                <el-input style="width: 180px;" v-model="data.options.backgroundImage"/>
            </el-form-item>
            <el-form-item label="颜色：" v-if="Object.keys(data.options).indexOf('color')>=0">
                <el-color-picker
                    v-model="data.options.color"
                />
            </el-form-item>
            <el-form-item label="标题字体颜色：" v-if="Object.keys(data.options).indexOf('colorTitle')>=0 && data.type=='detailTitle'">
                <el-color-picker
                    v-model="data.options.colorTitle"
                />
            </el-form-item>
            <el-form-item label="文本字体颜色：" v-if="Object.keys(data.options).indexOf('colorContent')>=0 && data.type=='detailTitle'">
                <el-color-picker
                    v-model="data.options.colorContent"
                />
            </el-form-item>
            <el-form-item label="标签背景色：" v-if="Object.keys(data.options).indexOf('tagColor')>=0">
                <el-color-picker
                    v-model="data.options.tagColor"
                />
            </el-form-item>
            <el-form-item label="字体大小：" v-if="Object.keys(data.options).indexOf('fontSize')>=0">
                <el-input v-model="data.options.fontSize"/>
            </el-form-item>
            <el-form-item label="标题字体大小：" v-if="Object.keys(data.options).indexOf('fontSizeTitle')>=0 && data.type=='detailTitle'">
                <el-input v-model="data.options.fontSizeTitle"/>
            </el-form-item>
            <el-form-item label="文本字体大小：" v-if="Object.keys(data.options).indexOf('fontSizeContent')>=0 && data.type=='detailTitle'">
                <el-input v-model="data.options.fontSizeContent"/>
            </el-form-item>
            <el-form-item label="字体重量：" v-if="Object.keys(data.options).indexOf('fontWeight')>=0">
                <el-select v-model="data.options.fontWeight">
                    <el-option value="100" label="100"/>
                    <el-option value="200" label="200"/>
                    <el-option value="300" label="300"/>
                    <el-option value="400" label="400"/>
                    <el-option value="500" label="500"/>
                    <el-option value="600" label="600"/>
                    <el-option value="700" label="700"/>
                </el-select>
            </el-form-item>
            <el-form-item label="卡片背景色" v-if="data.type=='card2'">
                <el-select v-model="data.options.chioseColor">
                    <el-option value="card-box-blue" label="蓝"/>
                    <el-option value="card-box-red" label="红"/>
                    <el-option value="card-box-purple" label="紫"/>
                    <el-option value="card-box-green" label="绿"/>
                </el-select>
            </el-form-item>
            <el-form-item label="卡片背景色" v-if="data.type=='card4'">
                <el-select v-model="data.options.chioseColor">
                    <el-option value="card-background-img-blue" label="蓝"/>
                    <el-option value="card-background-img-red" label="红"/>
                    <el-option value="card-background-img-purple" label="紫"/>
                    <el-option value="card-background-img-green" label="绿"/>
                    <el-option value="card-background-img-lightPurple" label="淡紫"/>
                    <el-option value="card-background-img-orange" label="橘"/>
                    <el-option value="card-background-img-none" label="无背景"/>
                </el-select>
            </el-form-item>
            <!-- 样式结束 -->

            <el-form-item label="占位内容" v-if="Object.keys(data.options).indexOf('placeholder')>=0 && (data.type!='time' || data.type!='date')">
                <el-input v-model="data.options.placeholder"/>
            </el-form-item>
            <el-form-item label="布局方式" v-if="Object.keys(data.options).indexOf('inline')>=0">
                <el-radio-group v-model="data.options.inline">
                    <el-radio-button :label="false">块级</el-radio-button>
                    <el-radio-button :label="true">行内</el-radio-button>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="显示输入框" v-if="Object.keys(data.options).indexOf('showInput')>=0">
                <el-switch v-model="data.options.showInput" />
            </el-form-item>
            <el-form-item label="最小值" v-if="Object.keys(data.options).indexOf('min')>=0">
                <el-input-number v-model="data.options.min" :min="0" :max="100" :step="1"/>
            </el-form-item>
            <el-form-item label="最大值" v-if="Object.keys(data.options).indexOf('max')>=0">
                <el-input-number v-model="data.options.max" :min="0" :max="100" :step="1"/>
            </el-form-item>
            <el-form-item label="步长" v-if="Object.keys(data.options).indexOf('step')>=0">
                <el-input-number v-model="data.options.step" :min="0" :max="100" :step="1"/>
            </el-form-item>
            <el-form-item label="是否多选" v-if="data.type=='select'">
                <el-switch v-model="data.options.multiple" @change="handleSelectMuliple"/>
            </el-form-item>
            <el-form-item label="是否可搜索" v-if="data.type=='select'">
                <el-switch v-model="data.options.filterable"/>
            </el-form-item>
            <el-form-item label="允许半选" v-if="Object.keys(data.options).indexOf('allowHalf')>=0">
                <el-switch
                    v-model="data.options.allowHalf"
                />
            </el-form-item>
            <el-form-item label="支持透明度选择" v-if="Object.keys(data.options).indexOf('showAlpha')>=0">
                <el-switch
                    v-model="data.options.showAlpha"
                />
            </el-form-item>
            <el-form-item label="是否显示标签" v-if="Object.keys(data.options).indexOf('showLabel')>=0">
                <el-switch
                    v-model="data.options.showLabel"
                />
            </el-form-item>
            <el-form-item label="选项" v-if="Object.keys(data.options).indexOf('options')>=0 && data.type!=='card5'">
                <el-radio-group v-model="data.options.remote" size="mini" style="margin-bottom:10px;">
                    <el-radio-button :label="false">静态数据</el-radio-button>
                    <el-radio-button :label="true">远端数据</el-radio-button>
                </el-radio-group>
                <template v-if="data.options.remote">
                    <div>
                        <el-input size="mini" style="" v-model="data.options.remoteFunc">
                            <template slot="prepend">远端方法</template>
                        </el-input>
                        <el-input size="mini" style="" v-model="data.options.props.value">
                            <template slot="prepend">值</template>
                        </el-input>
                        <el-input size="mini" style="" v-model="data.options.props.label">
                            <template slot="prepend">标签</template>
                        </el-input>
                    </div>
                </template>
                <template v-else>
                    <template v-if="data.type=='radio' || (data.type=='select'&&!data.options.multiple)">
                        <el-radio-group v-model="data.options.defaultValue">
                            <draggable
                                tag="ul"
                                :list="data.options.options"
                                v-bind="{group:{ name:'options'}, ghostClass: 'ghost',handle: '.drag-item'}"
                                handle=".drag-item"
                            >
                                <li v-for="(item, index) in data.options.options" :key="index" >
                                    <el-radio
                                        :label="item.value"
                                        style="margin-right: 5px;"
                                    >
                                        <el-input :style="{'width': data.options.showLabel? '90px': '190px' }" size="mini" v-model="item.value"/>
                                        <el-input style="width:100px;" size="mini" v-if="data.options.showLabel" v-model="item.label"/>
                                        <!-- <input v-model="item.value"/> -->
                                    </el-radio>
                                    <i class="drag-item" style="font-size: 16px;margin: 0 5px;cursor: move;"><i class="iconfont2 icon-icon_bars"/></i>
                                    <el-button @click="handleOptionsRemove(index)" circle plain type="danger" size="mini" icon="el-icon-minus" style="padding: 4px;margin-left: 5px;"/>

                                </li>
                            </draggable>

                        </el-radio-group>
                    </template>

                    <template v-if="data.type=='checkbox' || (data.type=='select' && data.options.multiple)">
                        <el-checkbox-group v-model="data.options.defaultValue">

                            <draggable
                                tag="ul"
                                :list="data.options.options"
                                v-bind="{group:{ name:'options'}, ghostClass: 'ghost',handle: '.drag-item'}"
                                handle=".drag-item"
                            >
                                <li v-for="(item, index) in data.options.options" :key="index" >
                                    <el-checkbox
                                        :label="item.value"
                                        style="margin-right: 5px;"
                                    >
                                        <el-input :style="{'width': data.options.showLabel? '90px': '190px' }" size="mini" v-model="item.value"/>
                                        <el-input style="width:100px;" size="mini" v-if="data.options.showLabel" v-model="item.label"/>
                                    </el-checkbox>
                                    <i class="drag-item" style="font-size: 16px;margin: 0 5px;cursor: move;"><i class="iconfont2 icon-icon_bars"/></i>
                                    <el-button @click="handleOptionsRemove(index)" circle plain type="danger" size="mini" icon="el-icon-minus" style="padding: 4px;margin-left: 5px;"/>

                                </li>
                            </draggable>
                        </el-checkbox-group>
                    </template>
                    <div style="margin-left: 22px;">
                        <el-button type="text" @click="handleAddOption">添加选项</el-button>
                    </div>
                </template>

            </el-form-item>

            <el-form-item label="远端数据" v-if="data.type=='cascader'">
                <div>
                    <el-input size="mini" style="" v-model="data.options.remoteFunc">
                        <template slot="prepend">远端方法</template>
                    </el-input>
                    <el-input size="mini" style="" v-model="data.options.props.value">
                        <template slot="prepend">值</template>
                    </el-input>
                    <el-input size="mini" style="" v-model="data.options.props.label">
                        <template slot="prepend">标签</template>
                    </el-input>
                    <el-input size="mini" style="" v-model="data.options.props.children">
                        <template slot="prepend">子选项</template>
                    </el-input>
                </div>
            </el-form-item>

            <el-form-item label="默认值" v-if="Object.keys(data.options).indexOf('defaultValue')>=0 && data.type!=='card5'">
                <el-input v-if="data.type=='textarea'" type="textarea" :rows="5" v-model="data.options.defaultValue"/>
                <el-input v-else-if="data.type=='input'" v-model="data.options.defaultValue"/>
                <el-input-number v-else-if="data.type=='slider'" v-model="data.options.defaultValue"/>
                <el-rate v-else-if="data.type == 'rate'" style="display:inline-block;vertical-align: middle;" :max="data.options.max" :allow-half="data.options.allowHalf" v-model="data.options.defaultValue"/>
                <el-button type="text" v-else-if="data.type == 'rate'" style="display:inline-block;vertical-align: middle;margin-left: 10px;" @click="data.options.defaultValue=0">清空</el-button>
                <el-color-picker
                    v-else-if="data.type == 'color'"
                    v-model="data.options.defaultValue"
                    :show-alpha="data.options.showAlpha"
                />
                <el-switch v-else-if="data.type=='switch'" v-model="data.options.defaultValue"/>

                <el-input v-else type="text" v-model="data.options.defaultValue"/>
            </el-form-item>
            <template v-if="data.type == 'time' || data.type == 'date'">
                <el-form-item label="显示类型" v-if="data.type == 'date'">
                    <el-select v-model="data.options.type">
                        <el-option value="year"/>
                        <el-option value="month"/>
                        <el-option value="date"/>
                        <el-option value="dates"/>
                        <!-- <el-option value="week"></el-option> -->
                        <el-option value="datetime"/>
                        <el-option value="datetimerange"/>
                        <el-option value="daterange"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否为范围选择" v-if="data.type == 'time'">
                    <el-switch
                        v-model="data.options.isRange"
                    />
                </el-form-item>
                <el-form-item label="是否获取时间戳" v-if="data.type == 'date'">
                    <el-switch
                        v-model="data.options.timestamp"
                    />
                </el-form-item>
                <el-form-item label="占位内容" v-if="(!data.options.isRange && data.type == 'time') || (data.type != 'time' && data.options.type != 'datetimerange' && data.options.type != 'daterange')">
                    <el-input v-model="data.options.placeholder"/>
                </el-form-item>
                <el-form-item label="开始时间占位内容" v-if="(data.options.isRange) || data.options.type=='datetimerange' || data.options.type=='daterange'">
                    <el-input v-model="data.options.startPlaceholder"/>
                </el-form-item>
                <el-form-item label="结束时间占位内容" v-if="data.options.isRange || data.options.type=='datetimerange' || data.options.type=='daterange'">
                    <el-input v-model="data.options.endPlaceholder"/>
                </el-form-item>
                <el-form-item label="格式">
                    <el-input v-model="data.options.format"/>
                </el-form-item>
                <el-form-item label="默认值" v-if="data.type=='time' && Object.keys(data.options).indexOf('isRange')>=0">
                    <el-time-picker
                        key="1"
                        style="width: 100%;"
                        v-if="!data.options.isRange"
                        v-model="data.options.defaultValue"
                        :arrow-control="data.options.arrowControl"
                        :value-format="data.options.format"
                    />
                    <el-time-picker
                        key="2"
                        v-if="data.options.isRange"
                        style="width: 100%;"
                        v-model="data.options.defaultValue"
                        is-range
                        :arrow-control="data.options.arrowControl"
                        :value-format="data.options.format"
                    />
                </el-form-item>
            </template>

            <template v-if="data.type=='imgupload'">
                <el-form-item label="最大上传数">
                    <el-input type="number" v-model.number="data.options.length"/>
                </el-form-item>
                <el-form-item label="Domain" :required="true">
                    <el-input v-model="data.options.domain"/>
                </el-form-item>
                <el-form-item label="获取七牛Token方法" :required="true">
                    <el-input v-model="data.options.tokenFunc"/>
                </el-form-item>
            </template>

            <template v-if="data.type=='blank'">
                <el-form-item label="绑定数据类型">
                    <el-select v-model="data.options.defaultType">
                        <el-option value="String" label="字符"/>
                        <el-option value="Object" label="对象"/>
                        <el-option value="Array" label="数组"/>
                    </el-select>
                </el-form-item>
            </template>

            <template v-if="data.type == 'grid'">
                <el-form-item label="栅格间隔">
                    <el-input type="number" v-model.number="data.options.gutter"/>
                </el-form-item>
                <el-form-item label="列配置项">
                    <draggable
                        tag="ul"
                        :list="data.columns"
                        v-bind="{group:{ name:'options'}, ghostClass: 'ghost',handle: '.drag-item'}"
                        handle=".drag-item"
                    >
                        <li v-for="(item, index) in data.columns" :key="index" >
                            <i class="drag-item" style="font-size: 16px;margin: 0 5px;cursor: move;"><i class="iconfont2 icon-icon_bars"/></i>
                            <el-input placeholder="栅格值" size="mini" style="width: 100px;" type="number" v-model.number="item.span"/>
                            <el-button @click="handleOptionsRemove(index)" circle plain type="danger" size="mini" icon="el-icon-minus" style="padding: 4px;margin-left: 5px;"/>
                        </li>
                    </draggable>
                    <div style="margin-left: 22px;">
                        <el-button type="text" @click="handleAddColumn">添加列</el-button>
                    </div>
                </el-form-item>
                <el-form-item label="水平排列方式">
                    <el-select v-model="data.options.justify">
                        <el-option value="start" label="左对齐"/>
                        <el-option value="end" label="右对齐"/>
                        <el-option value="center" label="居中"/>
                        <el-option value="space-around" label="两侧间隔相等"/>
                        <el-option value="space-between" label="两端对齐"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="垂直排列方式">
                    <el-select v-model="data.options.align">
                        <el-option value="top" label="顶部对齐"/>
                        <el-option value="middle" label="居中"/>
                        <el-option value="bottom" label="底部对齐"/>
                    </el-select>
                </el-form-item>
            </template>

            <template v-if="data.type != 'grid'">

                <el-form-item label="数据绑定Key">
                    <el-input v-model="data.model"/>
                </el-form-item>
                <el-form-item label="操作属性">
                    <el-checkbox v-model="data.options.readonly" v-if="Object.keys(data.options).indexOf('readonly')>=0">完全只读</el-checkbox>
                    <el-checkbox v-model="data.options.disabled" v-if="Object.keys(data.options).indexOf('disabled')>=0">禁用	</el-checkbox>
                    <el-checkbox v-model="data.options.editable" v-if="Object.keys(data.options).indexOf('editable')>=0">文本框可输入</el-checkbox>
                    <el-checkbox v-model="data.options.clearable" v-if="Object.keys(data.options).indexOf('clearable')>=0">显示清除按钮</el-checkbox>
                    <el-checkbox v-model="data.options.arrowControl" v-if="Object.keys(data.options).indexOf('arrowControl')>=0">使用箭头进行时间选择</el-checkbox>
                </el-form-item>
                <el-form-item label="校验">
                    <div>
                        <el-checkbox v-model="data.options.required">必填</el-checkbox>
                    </div>
                    <el-select v-if="Object.keys(data.options).indexOf('dataType')>=0" v-model="data.options.dataType" size="mini" >
                        <el-option value="string" label="字符串"/>
                        <el-option value="number" label="数字"/>
                        <el-option value="boolean" label="布尔值"/>
                        <el-option value="integer" label="整数"/>
                        <el-option value="float" label="浮点数"/>
                        <el-option value="url" label="URL地址"/>
                        <el-option value="email" label="邮箱地址"/>
                        <el-option value="hex" label="十六进制"/>
                    </el-select>

                    <div v-if="Object.keys(data.options).indexOf('pattern')>=0">
                        <el-input size="mini" v-model.lazy="data.options.pattern" style=" width: 240px;" placeholder="填写正则表达式"/>
                    </div>
                </el-form-item>
            </template>
        </el-form>

        <el-dialog
            title="选择图标"
            :visible.sync="dialogIconVisible"
            width="60%">
            <icon-selector @change="changeIcon"/>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogIconVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogIconVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<style lang="scss" scoped>
    .widget-config-container .config-content .el-form-item{
        margin-bottom: 0;
        padding: 5px 0;
    }
</style>
<script>
import Draggable from 'vuedraggable'
import IconSelector from '@/components/IconSelector'

export default {
    components: {
        Draggable,
        IconSelector
    },
    props: ['data', 'selectDict'],
    data() {
        return {
            dialogIconVisible: false,
            validator: {
                type: null,
                required: null,
                pattern: null,
                range: null,
                length: null
            }
        }
    },
    computed: {
        show() {
            if (this.data && Object.keys(this.data).length > 0) {
                return true
            }
            return false
        }
    },
    watch: {
        'data.options.isRange': function(val) {
            if (typeof val !== 'undefined') {
                if (val) {
                    this.data.options.defaultValue = null
                } else {
                    if (Object.keys(this.data.options).indexOf('defaultValue') >= 0) { this.data.options.defaultValue = '' }
                }
            }
        },
        'data.options.required': function(val) {
            if (val) {
                this.validator.required = { required: true, message: `${this.data.name}必须填写` }
            } else {
                this.validator.required = null
            }

            this.$nextTick(() => {
                this.generateRule()
            })
        },
        'data.options.dataType': function(val) {
            if (!this.show) {
                return false
            }

            if (val) {
                this.validator.type = { type: val, message: this.data.name + '格式不正确' }
            } else {
                this.validator.type = null
            }

            this.generateRule()
        },
        'data.options.pattern': function(val) {
            if (!this.show) {
                return false
            }

            if (val) {
                this.validator.pattern = { pattern: val, message: this.data.name + '格式不匹配' }
            } else {
                this.validator.pattern = null
            }

            this.generateRule()
        }
    },
    methods: {
        changeValue(e) {
            console.log(e)
            let obj = {}
            obj = this.selectDict.find((item) => {
                return item.code === e
            })
            if (!this.data.options.hasOwnProperty('defaultValueCName')) {
                this.$set(this.data.options, 'defaultValueCName', obj.name)
            } else {
                this.data.options.defaultValueCName = obj.name
            }
        },
        changeIcon(e) {
            this.data.options.iconName = e
        },
        handleOptionsRemove(index) {
            if (this.data.type === 'grid') {
                this.data.columns.splice(index, 1)
            } else {
                this.data.options.options.splice(index, 1)
            }
        },
        handleOptionsRemoveCard5(index, idx) {
            console.log(index, 'index', idx, 'idx')
            console.log(this.data.options.options[index].td[idx], 'this.data.options.options[index]')
            this.data.options.options[index].td.splice(idx, 1)
            // if (this.data.type === 'grid') {
            //     this.data.columns.splice(index, 1)
            // } else {
            //     this.data.options.options.splice(index, 1)
            // }
        },
        handleAddOption() {
            if (this.data.options.showLabel) {
                this.data.options.options.push({
                    value: '新选项',
                    label: '新选项'
                })
            } else {
                this.data.options.options.push({
                    value: '新选项'
                })
            }
        },
        handleAddOptionCard5() {
            console.log(this.data.options.options)
            this.data.options.options.push({ value: '', td: [{ colspan: '1', rowspan: '1', value: '' }, { colspan: '1', rowspan: '1', value: '' }, { colspan: '1', rowspan: '1', value: '' }] })
        },
        // 添加列
        handleAddColOptionCard5(index) {
            console.log(this.data.options.options)
            this.data.options.options[index].td.push({ colspan: '1', rowspan: '1', value: '' })
        },
        handleAddColumn() {
            this.data.columns.push({
                span: '',
                list: []
            })
        },
        generateRule() {
            this.data.rules = []
            Object.keys(this.validator).forEach(key => {
                if (this.validator[key]) {
                    this.data.rules.push(this.validator[key])
                }
            })
        },
        handleSelectMuliple(value) {
            if (value) {
                if (this.data.options.defaultValue) {
                    this.data.options.defaultValue = [this.data.options.defaultValue]
                } else {
                    this.data.options.defaultValue = []
                }
            } else {
                if (this.data.options.defaultValue.length > 0) {
                    this.data.options.defaultValue = this.data.options.defaultValue[0]
                } else {
                    this.data.options.defaultValue = ''
                }
            }
        }
    }
}
</script>
